<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <html lang="zh-Hans">
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
        <title>四叶草轻小说-注册</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="apple-mobile-web-app-title" content="哔哩轻小说">
        <link rel="stylesheet" href="../assets/css/sprite.css">
        <script src="../assets/js/jquery-3.3.1.js"></script>
        <script src="../assets/js/index.js" async></script>
        <%--        // 导航条样式--%>
        <style>
            .header .btn-group {
                width: 32%;
            }

            .header .btn-tab {
                line-height: 1.375rem;
            }

            .sp-dark-mode .header {
                border-bottom: 1px solid #1c1c1c;
            }

            @media (prefers-color-scheme: dark) {
                .header {
                    border-bottom: 1px solid #1c1c1c;
                }
            }
        </style>
        <style>
            body {
                font-family: Arial, sans-serif;
                position: relative; /* 让我们可以定位侧边 */
            }
            .register-form {
                max-width: 400px;
                margin: auto;
                padding: 20px;
                border: 1px solid #ccc;
                border-radius: 5px;
                background-color: #f9f9f9;
            }
            .register-form input[type="text"],
            .register-form input[type="email"],
            .register-form input[type="password"] {
                width: 90%;
                padding: 10px;
                margin: 10px 0;
            }
            .register-form input[type="submit"] {
                width: 100%;
                padding: 10px;
                background-color: #007BFF;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
            .register-form input[type="submit"]:hover {
                background-color: #0056b3;
            }
            .error {
                color: red;
                text-align: center;
                margin-top: 10px;
            }
            .password-requirements {
                font-size: 0.9em;
                color: #555;
                margin-top: 5px;
                display: none; /* 默认隐藏 */
            }
            .toggle-requirements {
                position: absolute; /* 绝对定位 */
                top: 50%; /* 垂直居中 */
                left: 100%; /* 靠右侧 */
                transform: translateY(-50%); /* 垂直居中 */
                cursor: pointer;
                color: pink; /* 粉色 */
                text-decoration: underline;
                margin-left: 10px; /* 距离注册框一些空间 */
            }
            .toggle-requirements:hover {
                color: #ff69b4; /* 浅粉色 */
            }
        </style>
</head>
<body class="night">
    <div class="page page-home">
        <div class="content">
            <header id="header" class="header header-index">
                <a href="../index.jsp" class="logo-a">
                    <h1 class="logo">哔哩轻小说</h1>
                </a>
                <nav class="btn-group">
                    <a href="../index.jsp" class="btn-tab active">轻小说</a>
                    <a href="<c:url value="/info/info.jsp"/>" class="btn-tab">个人主页</a>
                </nav>
                <div class="header-operate red">
                    <a href="<c:url value="/novel/login.jsp"/>" class="icon icon-regs">登录</a>
                    <a href="<c:url value="/novel/reg.jsp"/>" class="icon icon-regs">注册</a>
                </div>
            </header>
            <!-- 页面内容 S -->
            <div class="register-form">
                <h2>注册</h2>
                <form action="${pageContext.request.contextPath}//RegisterServlet" method="post">
                    <input type="text" name="username" placeholder="用户名" required>
                    <input type="text" name="nickname" placeholder="昵称" required>
                    <input type="email" name="email" placeholder="邮箱" required>
                    <input type="password" name="password" placeholder="密码" title="密码需大于7位，可包含字母、数字和特殊字符！" required>

                    <!-- 显示或隐藏密码要求的链接 -->
                    <div class="toggle-requirements" onclick="toggleRequirements()">查看密码要求</div>

                    <div class="password-requirements" id="requirements">
                        密码需大于7位，可使用以下字符：
                        <ul>
                            <li>大写字母（A-Z）</li>
                            <li>小写字母（a-z）</li>
                            <li>数字（0-9）</li>
                            <li>特殊字符（如 !@#$%^&*()_+）</li>
                        </ul>
                    </div>

                    <input type="password" name="confirmPassword" placeholder="确认密码" title="请再次输入密码" required>
                    <input type="text" name="invitationCode" placeholder="邀请码（可选）">
                    <input type="submit" value="注册">
                </form>
                <%
                    String error = (String) request.getAttribute("error");
                    if (error != null) {
                %>
                <div class="error"><%= error %></div>
                <%
                    }
                %>
            </div>

<!-- 添加 JavaScript 代码 -->
<script>
    function toggleRequirements() {
        const requirements = document.getElementById("requirements");
        if (requirements.style.display === "none") {
            requirements.style.display = "block"; // 显示
        } else {
            requirements.style.display = "none"; // 隐藏
        }
    }
</script>
</body>
</html>